<template>
	<view class="page">
		<view class="button-box">
			<button type="primary" @click="fetch">发起请求</button>
		</view>
		
		<view v-if="Array.isArray(result) && result.length > 0" class="result-box">
			<view class="result-box__header">请求结果：</view>
			
			<view class="result-box__detail">
				<view v-for="(item, index) in result" :key="index" class="result-box__detail-item">
					<view v-if="item.label" class="result-box__detail-item-label">{{item.label}}：</view>
					<view class="result-box__detail-item-value">{{item.value}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const BinFetch = uni.requireNativePlugin('UUCoder-BinFetch');
	
	const URL = 'https://ehealth.diaolanhua.com/uploads/static/tfjs/temperature/group1-shard1of1.bin';
	
	export default {
		data() {
			return {
				result: []
			}
		},
		methods: {
			fetch() {
				console.log('>>> fetch');
				
				this.result = [];
				
				const result = BinFetch.fetch(URL, result => {
					BinFetch.log('请求完成：' + JSON.stringify(result));
					console.log('请求完成：', result);
					
					if (!result || result.error) {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
						return;
					}
					
					if (!(result.statusCode >= 200 && result.statusCode < 300)) {
						this.result = [{
							label: 'StatusCode',
							value: result.statusCode
						}];
						return;
					}
					
					let data = Array.isArray(result.data) ? result.data : [];
					data = data.map(item => item & 0xFF);
					this.result = [
						{
							label: 'StatusCode',
							value: result.statusCode
						},
						{
							label: 'Lenth',
							value: data.length
						},
						{
							label: 'ArrayBuffer',
							value: data.join(', ')
						},
					];
				});
				
				console.log('>>> fetch.result: ', result);
				
				if (!result) {
					uni.showToast({
						title: '请求错误',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style>
	.page {
		padding: 40rpx 32rpx;
	}
	
	.button-box {
		margin-top: 100rpx;
	}
	
	.result-box {
		margin-top: 56rpx;
	}
	
	.result-box__header {
		font-size: 40rpx;
		line-height: 56rpx;
		color: black;
		font-weight: 700;
		
	}
	
	.result-box__detail {
		margin-top: 32rpx;
	}
	
	.result-box__detail-item {
		display: flex;
		font-size: 32rpx;
		line-height: 45rpx;
		color: black;
	}
	
	.result-box__detail-item:not(:first-child) {
		margin-top: 20rpx;
	}
	
	.result-box__detail-item-label {
		color: #888;
		white-space: nowrap;
	}
	
	.result-box__detail-item-value {
		flex: 1;
		word-break: break-all;
	}
</style>
